<style scoped>
    .not-current-month {
        color: #777777;
    }

    .is-today {
        color: #ffff00;
    }

    .more-course {
        text-align: left;
        font-size: 20px;
    }

    .course-line {
        text-align: left;
        margin: 2px;
        border: 1px solid #aaaaaa;
        background: rgba(255, 255, 255, 0.1);
        cursor: pointer;
        font-size: 20px;
    }

    .no-course-line {
        margin: 2px;
        border: 1px solid rgba(255, 255, 255, 0);
        font-size: 20px;
    }

    .course-dialog p, .course-dialog h2 {
        color: #000000;
        font-size: 24px;
    }

    .weekend {
        background-color: rgba(255, 0, 0, 0.2);
    }
</style>

<template>
    <div id="course-cell" :class="{'weekend': isWeekend}">
        <Row>
            <i-col span="20" style="text-align:left;padding-left:5px;font-size:18px;color:#555;">
                {{solar}}
            </i-col>
            <i-col span="4" style="text-align:right;padding-right:5px;font-weight:bold;"
                   v-bind:class="{'not-current-month': !isCurrentMonth, 'is-today': isToday}">
                {{day}}
            </i-col>
        </Row>
        <Row>
            <i-col span="24" v-for="n in 2" :key="n">
                <p class="course-line" v-if="displayCourses[n -1]" @click="showCourse(displayCourses[n -1])">
                    <Icon type="ios-book" :color="courseTypeColor(displayCourses[n - 1])"></Icon>
                    {{displayCourses[n - 1].date.format("hh:ss")}} {{displayCourses[n - 1].name}}
                </p>
                <p class="no-course-line" v-else>&nbsp;</p>
            </i-col>
            <i-col span="24" className="more-course">
                <Poptip width="500" :placement="poptipPlacement" :title="poptipTitle">
                    <a v-if="hasMoreCourse">更多课程…</a>&nbsp;
                    <div slot="content">
                        <Table border :columns="columns" :data="calendar.courses"></Table>
                    </div>
                </Poptip>
            </i-col>
        </Row>
        <Modal v-model="courseModal" width="960" className="course-dialog">
            <h2 slot="header" style="text-align:center;">
                <Icon type="ios-book" :color="courseTypeColor(currentCourse)"></Icon>
                {{currentCourse.name}}
            </h2>
            <p>开课时间：{{courseTimeString}}</p>
            <p>分享地址：<a :href="currentCourse.shareUrl" target="_blank">{{currentCourse.shareUrl}}</a></p>
            <p>课程介绍：{{currentCourse.introduce}}</p>
            <div slot="footer"></div>
        </Modal>
    </div>
</template>

<script>
    import Axios from "../../axios";
    import Common from "../../common";
    import Lunar from "../../lunar";

    export default {
        name: "course-cell",
        data() {
            return {
                courseModal: false,
                currentCourse: {},
                columns: [
                    {
                        title: "课堂",
                        width: 80,
                        render: (h, params) => {
                            return h("p", {}, this.courseTypeText(params.row));
                        }
                    },
                    {
                        title: "课程名称",
                        width: 220,
                        render: (h, params) => {
                            return h("a", {
                                on: {
                                    click: () => {
                                        this.showCourse(params.row);
                                    }
                                }
                            }, params.row.name);
                        }
                    },
                    {
                        title: "开课时间",
                        width: 150,
                        render: (h, params) => {
                            return params.row.date.format("hh:mm");
                        }
                    }
                ]
            }
        },
        props: {
            calendar: Object,
            currentMonth: Number
        },
        created() {
        },
        computed: {
            day() {
                return this.calendar.date.getDate();
            },
            isCurrentMonth() {
                const month = this.calendar.date.getMonth();
                return month === this.currentMonth;
            },
            isToday() {
                const now = new Date();
                return Common.isSameDay(now, this.calendar.date);
            },
            isWeekend() {
                const week = this.calendar.date.getDay();
                return week === 0 || week === 6;
            },
            hasMoreCourse() {
                return this.calendar.courses.length > 2;
            },
            displayCourses() {
                return this.calendar.courses.slice(0, 2);
            },
            courseTimeString() {
                const d = this.currentCourse.date;
                if (d) {
                    const w = Common.formatWeek(d.getDay());
                    return d.format("YYYY-MM-DD(星期") + w + d.format(") hh:mm");
                }
                return ""
            },
            solar() {
                return Lunar.solar(this.calendar.date);
            },
            poptipTitle() {
                const d = this.calendar.date;
                const w = Common.formatWeek(d.getDay());
                return d.format("YYYY-MM-DD(星期") + w + ")";
            },
            poptipPlacement() {
                const week = this.calendar.date.getDay();
                if (week <= 2) {
                    return "right";
                }
                if (week >= 4) {
                    return "left";
                }
                return "top";
            }
        },
        methods: {
            courseTypeColor(course) {
                if (course.schoolId === 0) {
                    return "#ff7f00";
                } else if (course.schoolId === 1) {
                    return "#ffbbff";
                } else if (course.schoolId === 2) {
                    return "#eee685";
                }
            },
            courseTypeText(course) {
                if (course.schoolId === 0) {
                    return "一";
                } else if (course.schoolId === 1) {
                    return "二";
                } else if (course.schoolId === 2) {
                    return "三";
                }
            },
            showCourse(course) {
                this.currentCourse = course;
                this.courseModal = true;
            }
        }
    }
</script>